<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>基础信息</a-breadcrumb-item>
    <a-breadcrumb-item>客户</a-breadcrumb-item>
  </a-breadcrumb>

  <a-button type="primary" @click="openAdd">新增</a-button>

  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 插入名称为cusid的插槽 -->
    <template #cusid="{ text }"> 编号：{{ text }} </template>

    <template #opr="{ record }">
     
      <a-button @click="openUpd(record)">修改</a-button>
      <a-divider type="vertical" />
      <a-button type="danger" @click="execDel(record.cus_id)" >删除</a-button>
      
    </template>
  </a-table>

  <!-- 新增窗口 -->
  <a-modal v-model:visible="visible" title="新增客户信息" @ok="execAdd">
    <a-form
      :model="addObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="客户编号">
        <a-input v-model:value="addObj.cus_id" />
      </a-form-item>
      <a-form-item label="客户名称">
        <a-input v-model:value="addObj.cus_name" />
      </a-form-item>
      <a-form-item label="客户备注">
        <a-textarea v-model:value="addObj.cus_remark" :rows="3" />
      </a-form-item>
    </a-form>
  </a-modal>


  <!-- 修改窗口 -->
  <a-modal v-model:visible="visible2" title="修改客户信息" @ok="execUpd">
    <a-form
      :model="updObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="客户编号">
        <a-input v-model:value="updObj.cus_id" disabled />
      </a-form-item>
      <a-form-item label="客户名称">
        <a-input v-model:value="updObj.cus_name" />
      </a-form-item>
      <a-form-item label="客户备注">
        <a-textarea v-model:value="updObj.cus_remark" :rows="3" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from "vue";
import { get, post, put, del, tip } from "@/common";

const columns = [
  {
    dataIndex: "cus_id", //服务端数据
    title: "客户编号", //表头项名称
    //slots定义插槽，即将开发者自定义的内容嵌入
    slots: {
      customRender: "cusid", //定义插槽名称，即以cusid为名插槽的数据插入该列位置
    },
  },
  {
    dataIndex: "cus_name", //服务端数据
    title: "客户名称", //表头项名称
  },
  {
    dataIndex: "cus_remark", //服务端数据
    title: "客户备注", //表头项名称
  },
  {
    key: "opr",
    title: "操作", //表头项名称
    //slots定义插槽，即将开发者自定义的内容嵌入
    slots: {
      customRender: "opr", //定义插槽名称，即以cusid为名插槽的数据插入该列位置
    },
  },
];

//分页处理-start
const query = reactive({}); //定义查询参数

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 2, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/info/customer", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

//分页处理-end

//新增
const addObj = reactive({
  cus_id: "",
  cus_name: "",
  cus_remark: "",
});
const visible = ref(false);
const openAdd = () => {
  //打开窗口
  visible.value = true;
};
const execAdd = () => {
  //执行新增
  post("/info/customer", addObj).then((res) => {
    addObj.cus_id = "";
    addObj.cus_name = "";
    addObj.cus_remark = "";
    visible.value = false;
    tip.success("新增客户成功！");
    getPage(page.value.last + 1);
  });
};



//修改
const updObj = reactive({
  cus_id: "",
  cus_name: "",
  cus_remark: "",
});
const visible2 = ref(false);
const openUpd = (cus) => {
    updObj.cus_id = cus.cus_id;
    updObj.cus_name = cus.cus_name;
    updObj.cus_remark = cus.cus_remark;
  //打开窗口
  visible2.value = true;
};
const exeUpd = () => {
  //执行修改
  put("/info/customer", updObj).then((res) => {
    updObj.cus_id = "";
    updObj.cus_name = "";
    updObj.cus_remark = "";
    visible.value = false;
    tip.success("修改客户成功！");
    getPage(page.value.current);
  });
};



//删除
const execDel = (cus_id)=>{
    del('/info/customer/'+cus_id).then(res=>{
        tip.success("删除客户成功！");
        getPage(page.value.current);
    });
};
</script>

<style scoped>
</style>